<template>
	<view class="index">
		<!--  自定义导航栏 -->
		<view class="nav_box" :style="{ height: titleHeight + 'px' }">
			<view class="navbar" :style="{ height: titleHeight + 'px' }">
				<view class="navbar-fixed">
					<!-- 状态栏 -->
					<view :style="{ height: statusBarHeight + 'px' }"></view>
					<view class="navbar-content"
						:style="{ height: navBarHeight + 'px', width: windowWidth + 'rpx', marginLeft: statusBarLeft + 'rpx' }">
						<view class="navbar-search">
							<view class="navbar-search_icon">
								<uni-icons type="search" size="16" color="#999"></uni-icons>
							</view>
							<view class="navbar-search_text">iPhone 14</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 主体内容 -->
		<view class="container">
			<view class="sort_conent">
				<!-- 侧边栏-一级分类 -->
				<view class="sort_left" :style="{ minHeight: windowleftHeight + 'px' }">
					<view class="left_con" :class="parent_cate_id == item.id ? 'active' : ''"
						v-for="(item, index) in categoryList" :key="item.id" @click="toggleParentCate(item,index)">
						<view class="con_line"></view>
						<view class="cate_name">
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="sort_right">
					<!-- 一级分类图片 -->
					<view class="sort_right_first_img">
						<image :src="selected_first_cate.icon" class="cate_img" mode="aspectFit"></image>
					</view>

					<view class="sub_cate_box">
						<view class="sub_cate_item" v-for="(item, index) in selected_first_cate.childList" :key="item.id">
							<view class="sub_cate_item_content">
								<view class="sub_item_line"></view>
								<view class="sub_cate_name">
									{{ item.name }}
								</view>
							</view>
							<scroll-view scroll-x="true" class="three_level_cate_content" enable-flex="true">
								<view class="three_level_cate_item" v-for="(item1, index1) in item.childList" :key="item1.id"
									@click="toCateProductList(item1)">
									<view class="three_level_cate_img">
										<image :src="item1.icon" class="cate_img" mode="aspectFit">
										</image>
									</view>
									<view class="three_level_cate_name">
										{{ item1.name }}
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	let app = getApp();
	import {
		getCategoryList
	} from '@/api/product.js';
	export default {
		data() {
			return {
				imgUrl: '', // 图片地址
				statusBarHeight: 20,
				navBarHeight: 45,
				windowWidth: 375,
				statusBarLeft: 0,
				statusBarRight: 0,
				titleHeight: 0,
				windowleftHeight: 0,
				parent_cate_id: '', // 所选一级分类 id
				sub_cate: [],
				categoryList: [], // 分类数据
				first_cate_index: 0, // 所选一级分类 index
				selected_first_cate: {} // 所选一级分类
			};
		},
		onLoad() {
			let that = this;
			that.imgUrl = app.globalData.imgUrl;
			that.getNacBar();
			that.getSystem();
			that.getAllCategory()
		},
		methods: {
			// 获取分类数据
			getAllCategory() {
				let that = this;
				let value = ""
				that.pidIndex = 0;
				getCategoryList().then(res => {
					that.categoryList = res.data;
					that.first_cate_index = 0;
					that.parent_cate_id = that.categoryList[0].id
					that.selected_first_cate = that.categoryList[0]
					console.log('res', res);
				})
			},
			getNacBar() {
				let that = this;
				//获取手机系统信息
				const info = app.globalData.systemInfo;
				console.log('getSystemInfoSync', info);
				//设置状态栏高度
				this.titleHeight = +info.titleBarHeight + +info.statusBarHeight;
				// 获取胶囊的位置
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				console.log('getMenuButtonBoundingClientRect', menuButtonInfo);
				// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
				this.statusBarHeight = menuButtonInfo.top;
				this.windowWidth = info.windowWidth;
				this.statusBarLeft = menuButtonInfo.optionMenuWidth * 2;
				this.navBarHeight = menuButtonInfo.height;
			},
			getSystem() {
				let that = this;
				let app = getApp();
				uni
					.createSelectorQuery()
					.selectViewport()
					.boundingClientRect()
					.exec((ret) => {
						that.windowleftHeight = ret[0].height - this.titleHeight;
					});
			},
			// 切换一级分类
			toggleParentCate(item, index) {
				let that = this;
				let app = getApp();
				that.first_cate_index = index;
				that.parent_cate_id = item.id;
				that.selected_first_cate = item
			},
			// 点击前往商品分类列表
			toCateProductList(item) {
				let that = this;
				uni.navigateTo({
					url: '/pages/goods/goods_list/index?cate_id=' + item.id + '&cate_name=' + item.name
					// url: '/subpage/product-list/index?cate_id=' + item.id + '&cate_name=' + item.name
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.index {
		box-sizing: border-box;
		height: 100%;
		width: 100%;
	}

	/* 自定义导航栏 */
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 99;

		.navbar-fixed {
			z-index: 99;
			width: 100%;

			.navbar-content {
				box-sizing: border-box;
				padding: 0 15px;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 45px;

				// 搜索
				.navbar-search {
					display: flex;
					align-items: center;
					padding: 0 10px;
					width: 100%;
					height: 30px;
					border-radius: 30px;
					background: rgba(0, 0, 0, 0.05);

					// 搜索icon
					.navbar-search_icon {
						margin-right: 10px;
					}

					// 搜索文本
					.navbar-search_text {
						width: 100%;
						font-size: 14px;
						color: #999;
					}
				}
			}
		}
	}

	/*  主要内容 */
	.container {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		background-color: #fff;

		/* 分类主体 */
		.sort_conent {
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			display: flex;

			.sort_left {
				box-sizing: border-box;
				width: 182rpx;
				height: 100%;
				background: rgba(0, 0, 0, 0.05);

				.left_con {
					box-sizing: border-box;
					text-align: center;
					width: 182rpx;
					height: 96rpx;
					line-height: 96rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
				}

				.left_con.active {
					display: flex;
					align-items: center;
					background-color: #fff;
					font-weight: 600;
					color: rgba(255, 110, 19, 0.85);

					.con_line {
						width: 8rpx;
						height: 32rpx;
						background: #ff6e13;
						border-radius: 4rpx;
					}

					.cate_name {
						width: 100%;
					}
				}
			}

			.sort_right {
				box-sizing: border-box;
				padding: 24rpx;
				width: 100%;
				flex: 1;

				.sort_right_first_img {
					margin-bottom: 24rpx;

					image {
						width: 100%;
						height: 160rpx;
						border-radius: 8rpx;
					}
				}

				.sub_cate_box {
					box-sizing: border-box;
					width: 100%;

					.sub_cate_item {
						box-sizing: border-box;
						margin-bottom: 24rpx;

						.sub_cate_item_content {
							box-sizing: border-box;
							display: flex;
							align-items: center;
							width: 100%;
							margin-bottom: 24rpx;

							.sub_item_line {
								width: 4rpx;
								height: 24rpx;
								background: #FF6E13;
								margin-right: 8rpx;
							}

							.sub_cate_name {
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: rgba(0, 0, 0, 0.85);
								line-height: 44rpx;
							}
						}

						.three_level_cate_content {
							box-sizing: border-box;
							width: 520rpx;
							display: flex;
							white-space: nowrap;
							overflow: hidden;

							.three_level_cate_item {
								box-sizing: border-box;
								width: 156rpx;
								text-align: center;
								margin-right: 28rpx;

								.three_level_cate_img {
									width: 156rpx;
									height: 156rpx;
									margin-bottom: 8rpx;

									.cate_img {
										width: 100%;
										height: 150rpx;
										border-radius: 8rpx;
									}
								}

								.three_level_cate_name {
									font-weight: 400;
									font-size: 24rpx;
									color: rgba(0, 0, 0, 0.85);
									line-height: 36rpx;
								}
							}

							.three_level_cate_item:last-child {
								margin-right: 0;
							}


						}
					}
				}
			}
		}
	}
</style>